<template>
	<view class="" :style="{'--themcolor':usethemestore.themecolor,'--themcolor2':usethemestore.themecolor2}"
		style="background-color: #eee;">
		<view class=""
			style="width: 100vw;height: fit-content;position: fixed;background:linear-gradient(to top,#eee ,var(--themcolor)) ;z-index: 99;border-bottom: 1rpx solid #eee;">
			<fixtitletopVue>
				<template #l>
					<view class="fixbox">
						<view class="fix-t-l" @click="changeaddress">
							<view class="iconfont icon-weizhi"></view>
							<view class="font">{{currentaddress}}</view>
							<view class="iconfont icon-jiantou"></view>
						</view>
					</view>
				</template>
				<template #c>
					<view></view>
				</template>
			</fixtitletopVue>
		</view>
		<view class="" :style="{height:getstatusheight()+gettitleheight()+'px'}"></view>
		<view class="content">
			<swiper autoplay :interval="2000" :duration="1000" circular>
				<swiper-item v-for="i in banderdata" :key="i.id">
					<view class="swiper-item">
						<image :src="'http://127.0.0.1:3006'+i.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="seachbox" @click="goseach">
				<view class="iconfont icon-sousuo"></view>
				<input type="text" placeholder="菜品、店铺名" :disabled="true" />
			</view>
			<view class="classly" style="background-color: #fff;">
				<view class="" v-for="i  in lxdata" :key="i.id" @click="golxpage(i)">
					<image :src="'http://127.0.0.1:3006'+i.img" mode="aspectFill"></image>
					<view class="con">{{i.title}}</view>
				</view>
			</view>
			<view class="selectorbox" v-if="shopperdata" style="background-color: #fff;">
				<scroll-view scroll-x>
					<view class="itembox">
						<image v-for="i in shopperdata.product" :src="'http://127.0.0.1:3006'+i.img" mode="aspectFill"
							:key="i.id" @click="goproducetxq(i)"></image>
					</view>
				</scroll-view>
				<view class="s-con">
					<view class="s-top">
						<view class="s-t-l">{{shopperdata.shoper.dname}}</view>
						<view class="s-t-r">
							<uni-rate :is-fill="false" :size="13" :max="5" :value="4.5" active-color="red"
								:disabled="true" allow-half /> 4.5
						</view>
					</view>
					<view class="s-b">
						<view class="s-b-l">
							<view class="">好吃</view>
							<view class="">速度快</view>
						</view>
					</view>
				</view>
			</view>
			<view class="hot-title">
				<view class="iconfont icon-daochu1024-07"></view>
				<view class="">热门推荐</view>
			</view>
			<view class="srollview">
				<view class="hotshow" v-for="(item,index) in showproddata" :key="index"
					style="background-color: #fff;box-shadow: 0 0 2rpx 2rpx rgba(0, 0, 0, 0.09);">
					<hotcordVue :data="item" />
				</view>
			</view>
			<uni-load-more :status="backcurrentpro.length<4?'no-more':'loading'"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		getstatusheight,
		gettitleheight
	} from '@/util/getsysinfo.js'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import hotcordVue from '../../components/hotcord/hotcord.vue';
	import {
		getgetbanderdata
	} from '@/api/index.js'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const txmap = require('../../static/qqmap-wx-jssdk.js')
	import userstore from '@/store/user.js'
	import themestore from '@/store/theme.js'
	import {
		getlx,
		sgetshopper,
		sgetproducts
	} from '../../api/index.js'
	import address from '@/store/address.js'
	const useaddressstore = address()
	const usethemestore = themestore()
	const heighttop = gettitleheight() + getstatusheight() + 'px'
	const useuserstore = userstore()
	const banderdata = ref()
	const currentaddress = ref()
	const lxdata = ref()
	const shopperdata = ref()
	const showproddata = ref([])
	const offset = ref(1)
	const limit = ref(4)
	const backcurrentpro = ref([])
	onLoad(() => {
		getbanderdata()
		uni.getFuzzyLocation({
			type: 'wgs84',
			success(res) {
				const latitude = res.latitude
				const longitude = res.longitude
				getcurrentaddressmap(latitude, longitude)
			}
		})
		getslx()
	})
	const golxpage = e => {
		uni.navigateTo({
			url: `/pages/lxdata/lxdata?title=${e.title}&lx=${e.lx}`
		})
	}
	const getcurrentaddressmap = (latitude, longitude) => {
		const useaddress = new txmap({
			key: "V3PBZ-J54LZ-PTCXB-ZYOG6-2F5FK-WOFC2"
		})
		useaddress.reverseGeocoder({
			location: {
				latitude: `${latitude}`,
				longitude: `${longitude}`
			},
			success(e) {
				currentaddress.value = e.result.address_component.province + e.result
					.address_component.city + e.result.address_component.district
				console.log(e.result.address_component.province + '/' + e.result
					.address_component.city + '/' + e.result.address_component.district)
				const endaddress = e.result.address_component.province + '/' + e.result
					.address_component.city + '/' + e.result.address_component.district
				useaddressstore.address = endaddress
				ssgetshopper()
				sssgetproducts()
			},
			fail(e) {
				console.log(e)
			}
		})
	}
	onShow(() => {
		uni.setTabBarStyle({
			selectedColor: usethemestore.themecolor,
		})
		switch (usethemestore.themname) {
			case "pink": {
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy-pink.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd-pink.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd-pink.png"
				})
				break
			}
			case "green": {
				console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy-green.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd-green.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd-green.png"
				})
				break
			}
			case "orange": {
				console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy-or.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd-or.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd-or.png"
				})
				break
			}
			case "blue": {
				console.log(usethemestore.themname)
				uni.setTabBarItem({
					index: 0,
					selectedIconPath: "static/sy2.png"
				})
				uni.setTabBarItem({
					index: 1,
					selectedIconPath: "static/dd2.png"
				})
				uni.setTabBarItem({
					index: 2,
					selectedIconPath: "static/wd2.png"
				})
				break
			}
		}
	})
	onReachBottom((e) => {
		changepage()
	})
	const changeaddress = () => {
		// uni.chooseAddress({
		// 	success(e) {
		// 		console.log(e)
		// 	}
		// })
		uni.chooseLocation({
			success(e) {
				shopperdata.value = ''
				showproddata.value = []
				backcurrentpro.value = []
				offset.value = 1
				getcurrentaddressmap(e.latitude, e.longitude)
			}
		})
	}
	const changepage = () => {
		if (backcurrentpro.value.length < 4) return
		offset.value++
		sssgetproducts()
	}
	const getbanderdata = async () => {
		const rudata = await getgetbanderdata()
		if (rudata.code == 200) {
			banderdata.value = rudata.data
		}
	}
	const goproducetxq = (i) => {
		uni.navigateTo({
			url: `/pages/producet-xq/producet-xq?userid=${i.shoperid}&id=${i.id}`
		})
	}
	const goseach = () => {
		uni.navigateTo({
			url: "/pages/seachpage/seachpage"
		})
	}
	const getslx = async () => {
		const rudata = await getlx()
		if (rudata.code == 200) {
			lxdata.value = rudata.data
		}
	}
	const ssgetshopper = async () => {
		const rudata = await sgetshopper(useaddressstore.address)
		if (rudata.code == 200) {
			shopperdata.value = rudata.data
		} else {

			uni.showToast({
				title: "该地区暂无数据",
				icon: "none"
			})
		}
	}
	const sssgetproducts = async () => {
		const rudata = await await sgetproducts(useaddressstore.address, offset.value, limit.value)
		if (rudata.code == 200) {
			backcurrentpro.value = rudata.data
			showproddata.value = [...showproddata.value, ...rudata.data]
		}
	}
</script>

<style scoped lang="scss">
	.fixbox {
		position: relative;
		z-index: 999;
	}

	.fix-t-l {
		position: absolute;
		width: 350rpx;
		height: 100%;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;

		.iconfont {
			font-size: 25rpx;
		}

		.icon-weizhi {
			font-size: 26rpx;
			font-weight: 700;
		}

		.icon-jiantou {
			transform: rotate(-90deg);
		}
	}

	.content {
		width: 100%;
		padding: 0 30rpx;

		swiper {
			margin-top: 20rpx;
			height: 300rpx;
			width: 100%;

			swiper-item {
				display: flex;
				align-items: center;
				justify-content: center;

				.swiper-item {
					height: 98%;
					width: 98%;
					border-radius: 20rpx;
					overflow: hidden;
					background-color: blue;
					border: 1px solid #000;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}
		}

		.seachbox {
			// position: sticky;
			// top: calc(v-bind(heighttop) + 20rpx);
			position: relative;
			z-index: 2;
			height: 70rpx;
			width: 98%;
			margin: 20rpx auto 0 auto;
			border-radius: 80rpx;
			border: 2rpx solid #000;
			font-size: 25rpx;
			background-color: #fff;

			view {
				position: absolute;
				top: 50%;
				left: 15rpx;
				transform: translateY(-50%);
				color: #000;
			}

			input {
				position: absolute;
				top: 50%;
				left: 50rpx;
				transform: translateY(-50%);
			}
		}

		.classly {
			margin-top: 20rpx;
			box-shadow: 0 0 2rpx 2rpx rgba(0, 0, 0, 0.09);
			border-radius: 10rpx;
			height: 150rpx;
			width: 100%;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 22rpx;

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 10rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
				}

			}

		}

		.selectorbox {

			margin-top: 20rpx;
			height: 310rpx;
			width: 100%;
			padding: 0 10rpx;
			box-shadow: 0 0 2rpx 2rpx rgba(0, 0, 0, 0.09);
			border-radius: 10rpx;
			padding: 10rpx;

			scroll-view {
				height: 55%;
				width: 100%;

				.itembox {
					width: fit-content;
					display: flex;
					height: 100%;
					gap: 20rpx;

					image {
						height: 100%;
						width: 250rpx;
						border-radius: 10rpx;
					}
				}
			}

			.s-con {
				width: 100%;
				height: 45%;
				padding: 0 10rpx;

				.s-top {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.s-t-l {
						font-size: 25rpx;
						width: 400rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.s-t-r {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						gap: 20rpx;
						color: #7b7b7b;
					}
				}

				.s-b {
					width: 100%;
					height: 50%;

					.s-b-l {
						display: flex;
						align-items: center;

						view {
							padding: 10rpx 20rpx;
							width: fit-content;
							font-size: 22rpx;
							margin-right: 20rpx;
							background-color: var(--themcolor);
							color: #fff;
							font-weight: 700;
							border-radius: 10rpx;
						}
					}
				}
			}
		}

		.hot-title {
			font-size: 31rpx;
			font-weight: 700;
			display: flex;
			align-items: center;
			gap: 10rpx;
			padding: 20rpx 0;

			.iconfont {
				color: red;
				font-size: 33rpx;
				font-weight: 700;
			}
		}

		.srollview {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;

			.hotshow {
				height: 390rpx;
				width: 100%;
				box-shadow: 0 0 2rpx 2rpx rgba(0, 0, 0, 0.09);
				overflow: hidden;
				border-radius: 10rpx;
			}
		}
	}
</style>